<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>{页面标题} - 蒙自公安数据采集及分析平台</title>
	<!--链式CSS文件-->
	<link rel="stylesheet" href="../../assets/css/uikit.css">
	<link rel="stylesheet" href="../../assets/css/style.css">
	<link rel="stylesheet" href="../../assets/icons/style.css">

	<!--链式JS文件-->
  <script src="../../scripts/jquery-1.11.3.min.js"></script>
  <script src="nav.js"></script>
  <script src="../../scripts/plugins/jquery.icheck.min.js"></script>
  <script src="../../scripts/plugins/jquery.tablesort.min.js"></script>
  <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=5FnNQNGWXlHGq9nbLKLLAsdU"></script>

  <!--内嵌CSS样式-->
  <style type="text/css">
    /*尽量避免使用内嵌样式和行内样式，建议使用链式CSS。*/
  </style>
</head>
<body class="sys-body">
  <div class="sys-header">
    <div class="sys-logo">
      <h1>云南公安网安大数据安全监管平台</h1>
    </div>

    <div class="sys-menu" id="sys-menu">
      <ul>
        <li>loading......</li>
      </ul>
      <div class="curLine"></div>
    </div>
    <div class="sys-topbar">
      <img src="../../assets/images/_userphoto.png"><span><a href="javascript:void(0);">Admin</a><a href="javascript:void(0);"> 【注销】</a></span>
    </div>
  </div>

  <div class="sys-sidebar">
    <div class="toggle-sidebar"><i class="icon-toleft"></i></div>
    <ul>
      <li><a href="sys-user.html"><i class="icon-track-changes"></i><span>用户管理</span></a><em class="open"></em>
        <ul>
          <li><a href="sys-user.html">用户管理</a></li>
          <li><a href="sys-role.html">角色管理</a></li>
        </ul>
      </li>

      <li  class="active"><a href="sys-db.html"><i class="icon-file-text2"></i><span>数据管理</span></a><em class="open"></em>
        <ul>
          <li  class="active"><a href="sys-disk.html">磁盘清理</a></li>
          <li><a href="sys-backup.html">数据备份</a></li>
        </ul>
      </li>

      <li> <a href="javascript:void(0);"><i class="icon-profile"></i><span>系统信息</span></a><em class="open"></em>
        <ul>
          <li><a href="sys-info.html">系统信息</a></li>
        </ul>
      </li>
    </ul>
  </div>

  <div class="sys-main" id="sys-main">
    <div class="sys-title">
      <h2>一级菜单名称 - 二级子菜单名称</h2>
      <ul class="nav-tabs">
        <li class="active"><a href="javascript:void(0)">常规页面</a></li>
        <li><a href="javascript:void(0)">全屏地图</a></li>
      </ul>
      <div class="alink"><a  href="javascript:void(0);" onclick="javascript:history.go(-1)"><i class="icon-folder"></i>三级页面链接或者返回等操作</a></div>
    </div>

    <div class="sys-content">
      <div class="panel">
        <div class="panel-head">
          <div class="panel-title">
            <h3>角色列表</h3>
          </div>
          <div class="btnbar"> <button class="btn btn-success" id="add">添加角色</button></div>

          <div class="filter">
            <input type="text" placeholder="选择时间范围" value="2017-08-25 ~ 2017-08-25">
            <div class="fm-group"><select><option>审计对象名称</option><option>数据库名称</option><option>数据库账户</option><option>客户端IP</option></select>
              <input type="text" placeholder="请输入关键词查询">
            </div>
            <button class="btn">检索</button>
          </div>

        </div>
        <div class="panel-body">

          <div class="advanced-search">
            <div class="as-item">
              <div class="as-item-tit">关键词</div>
              <div class="as-item-con">
                <ul class="check-group  check-radio">
                  <li><a href="javascript:void(0);">select</a></li>
                  <li><a href="javascript:void(0);">create</a></li>
                  <li><a href="javascript:void(0);">execute</a></li>
                  <li><a href="javascript:void(0);">insert</a></li>
                  <li><a href="javascript:void(0);">alter</a></li>
                  <li><a href="javascript:void(0);">call</a></li>
                  <li class="active"><a href="javascript:void(0);">update</a></li>
                  <li><a href="javascript:void(0);">drop</a></li>
                  <li><a href="javascript:void(0);">delete</a></li>
                  <li><a href="javascript:void(0);">rollback</a></li>
                  <li><a href="javascript:void(0);">truncate</a></li>
                  <li><a href="javascript:void(0);">grant</a></li>
                  <li><a href="javascript:void(0);">revoke</a></li>
                  <li><a href="javascript:void(0);">commit</a></li>
                  <li><a href="javascript:void(0);">begin</a></li>
                  <li><a href="javascript:void(0);">end</a></li>
                  <li><a href="javascript:void(0);">exec</a></li>
                  <li><a href="javascript:void(0);">use</a></li>
                  <li><a href="javascript:void(0);">declare</a></li>
                  <li><a href="javascript:void(0);">If</a></li>
                  <li><a href="javascript:void(0);">comment</a></li>
                  <li><a href="javascript:void(0);">explain</a></li>
                  <li><a href="javascript:void(0);">lock</a></li>
                  <li><a href="javascript:void(0);">savepoint</a></li>
                  <li><a href="javascript:void(0);">set</a></li>
                  <li><a href="javascript:void(0);">rename</a></li>
                  <li><a href="javascript:void(0);">merge</a></li>
                  <li><a href="javascript:void(0);">studio</a></li>
                  <li><a href="javascript:void(0);">library</a></li>
                  <li><a href="javascript:void(0);">starttarget</a></li>
                  <li><a href="javascript:void(0);">deny</a></li>
                  <li><a href="javascript:void(0);">login</a></li>
                  <li><a href="javascript:void(0);">logout</a></li>
                  <li><a href="javascript:void(0);">savedefinition</a></li>
                  <li><a href="javascript:void(0);">SaveClassDefinition</a></li>
                  <li><a href="javascript:void(0);">compileclass</a></li>
                  <li><a href="javascript:void(0);">Compile k</a></li>
                  <li><a href="javascript:void(0);">Compile cuk</a></li>
                  <li><a href="javascript:void(0);">run</a></li>
                  <li><a href="javascript:void(0);">studio.debugger</a></li>
                  <li><a href="javascript:void(0);">OpenId</a></li>
                  <li><a href="javascript:void(0);">GET</a></li>
                  <li><a href="javascript:void(0);">POST</a></li>
                  <li><a href="javascript:void(0);">HEAD</a></li>
                  <li><a href="javascript:void(0);">TRACE</a></li>
                  <li><a href="javascript:void(0);">PUT</a></li>
                  <li><a href="javascript:void(0);">OPTIONS</a></li>
                  <li><a href="javascript:void(0);">CONNECT</a></li>
                  <li><a href="javascript:void(0);">Scan</a></li>
                  <li><a href="javascript:void(0);">Get</a></li>
                  <li><a href="javascript:void(0);">Createtable</a></li>
                  <li><a href="javascript:void(0);">Deletetable</a></li>
                  <li><a href="javascript:void(0);">Disabletable</a></li>
                  <li><a href="javascript:void(0);">Addcolumn</a></li>
                  <li><a href="javascript:void(0);">Multi</a></li>
                  <li><a href="javascript:void(0);">Mutate</a></li>
                </ul>
                <a class="more" href="javascript:void(0)"><i class="icon-add-circle-o"></i>更多</a>
              </div>
            </div>
            <div class="as-item as-item-btnbar">
              <button class="btn">检索</button>
            </div>
          </div>


          <table class="table table-striped">
            <thead>
              <tr>
                <th width="5%"><input type="checkbox"></th>
                <th width="5%">序号</th>
                <th>角色名称</th>
                <th width="28%">权限</th>
                <th>用户数量</th>
                <th>备注</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr class="active">
                <td><input type="checkbox" checked></td>
                <td>1</td>
                <td><a href="javascript:void(0);">平台管理员</a></td>
                <td>平台所有权限</td>
                <td>1</td>
                <td>平台所有权限</td>
                <td class="icons"><a href="javascript:void(0);"><i class="icon-setting" title="修改"></i></a></td>
              </tr>
              <tr>
                <td><input type="checkbox"></td>
                <td>2</td>
                <td><a href="javascript:void(0);">采集系统管理员</a></td>
                <td>数据源管理、采集任务管理、数据采集监控、录入工具</td>
                <td>2</td>
                <td>采集系统所有权限</td>
                <td class="icons"><a href="javascript:void(0);"  title="修改"><i class="icon-setting"></i></a><a href="javascript:void(0);" title="删除"><i class="icon-delete"></i></a></td>
              </tr>
              <tr>
                <td><input type="checkbox"></td>
                <td>3</td>
                <td><a href="javascript:void(0);">分析系统管理员</a></td>
                <td>分析系统所有权限</td>
                <td>6</td>
                <td>分析系统所有权限</td>
                <td class="icons"><a href="javascript:void(0);"  title="修改"><i class="icon-setting"></i></a><a href="javascript:void(0);" title="删除"><i class="icon-delete"></i></a></td>
              </tr>
              <tr>
                <td><input type="checkbox"></td>
                <td>4</td>
                <td><a href="javascript:void(0);">警务系统角色</a></td>
                <td>超级管理员、站长、警员</td>
                <td>5</td>
                <td>外接第三方系统</td>
                <td class="icons"><a href="javascript:void(0);"  title="修改"><i class="icon-setting"></i></a><a href="javascript:void(0);" title="删除"><i class="icon-delete"></i></a></td>
              </tr>
              <tr>
                <td><input type="checkbox"></td>
                <td>5</td>
                <td><a href="javascript:void(0);">资源目录系统用户</a></td>
                <td>上传、下载</td>
                <td>2421</td>
                <td>资源目录系统一般用户</td>
                <td class="icons"><a href="javascript:void(0);"  title="修改"><i class="icon-setting"></i></a><a href="javascript:void(0);" title="删除"><i class="icon-delete"></i></a></td>
              </tr>
            </tbody>
          </table>


          <label><input type="checkbox"><span>Normal</span></label>
          <label><input type="checkbox" checked="">Checked</label>
          <label><input type="checkbox" disabled="">Disabled</label>
          <label><input type="checkbox" checked="" disabled="">Disabled &amp; checked </label>
          <label><input type="radio" name="iCheck">Normal</label>
          <label><input type="radio" name="iCheck" checked="">Checked</label>
          <label><input type="radio" name="iCheck" disabled="">Disabled</label>
          <label><input type="radio" name="iCheck_D" checked="" disabled="">Disabled &amp; checked </label>

        </div><!--panel-body end-->
        <div class="panel-foot">
          <div class="btns"><button class="btn">批量导出</button></div>
          <div class="page">
            <ul class="pagination">
              <li class="disabled"><a href="javascript:void(0);">&lt;</a></li>
              <li class="active"><a href="javascript:void(0);">1</a></li>
              <li><a href="javascript:void(0);">2</a></li>
              <li><a href="javascript:void(0);">3</a></li>
              <li><a href="javascript:void(0);">4</a></li>
              <li><a href="javascript:void(0);">5</a></li>
              <li><a href="javascript:void(0);">&gt;</a></li>
              <li class="go"><input type="text" title="输入页码跳转"></li>
            </ul>
          </div>
        </div><!--panel-foot end-->
      </div>

      <div class="panel">
        <div class="panel-head">
          <div class="panel-title">
            <h3>配置</h3>
          </div>
        </div>
        <div class="panel-body">
          <div class="form-box">

            <div class="form-item">
              <div class="form-title"><em class="fc-danger">*</em>发件人邮箱地址：</div>
              <div class="form-content"><input type="text" class="long" value="admin@163.com"><em class="fc-success"><i class="icon-safe"></i>成功文字可以不要</em></div>
            </div>
            <div class="form-item">
              <div class="form-title"><em class="fc-danger">*</em>发件人名称：</div>
              <div class="form-content"><input type="text" class="long"><em class="fc-warning"><i class="icon-security-alarm"></i>请输入正确的邮件地址</em></div>
            </div>
            <div class="form-item">
              <div class="form-title"><em class="fc-danger">*</em>邮件服务器：</div>
              <div class="form-content"><input type="text" class="long"><em>初始信息</em></div>
            </div>
            <div class="form-item">
              <div class="form-title"><em class="fc-danger">*</em>端口：</div>
              <div class="form-content"><input type="text" class="long"><em>初始信息</em></div>
            </div>
            <div class="form-item">
              <div class="form-title"><em class="fc-danger">*</em>用户名：</div>
              <div class="form-content"><input type="text" class="long"><em>初始信息</em></div>
            </div>
            <div class="form-item">
              <div class="form-title"><em class="fc-danger">*</em>密码：</div>
              <div class="form-content"><input type="password" class="long"><em>初始信息</em></div>
            </div>

            <div class="form-item">
              <div class="form-title">测试邮箱：</div>
              <div class="form-content"><textarea class="long"></textarea> <button class="btn btn-sm btn-minor">测试</button></div>
            </div>
          </div>
        </div>
        <div class="panel-foot">
          <div class="form-btn">
            <button class="btn">保存</button>
          </div>
        </div>

      </div>

    </div>

    <div class="sys-content" style="display:none">
      <div class="map-box">
       <div class="map" id="map"></div>
       <div class="map-left">
        <a class="map-left-toggle" href="javascript:void(0)" title="折叠边栏"></a>
        <div>地图左侧浮动区域</div>
      </div>
      <div class="map-right">
        <a class="map-right-toggle" href="javascript:void(0)" title="折叠边栏"></a>
        <div>地图右侧浮动区域</div>
      </div>
    </div>
  </div>

</div>


<div class="dialog">
  <div class="dialog-win">
    <div class="dialog-head">添加设备<a class="close" href="javascript:void(0)"><i class="icon-close"></i></a></div>
    <div class="dialog-body" style="height:450px;">

      <div class="form-box" style="display:block;">
        <div class="form-item">
          <div class="form-title"><!-- <em class="fc-danger">*</em> -->所属区县：</div>
          <div class="form-content">
            <div class="col-fm-l">
              <select>
                <option value="-1">请选择</option>
                <optgroup label="甘孜州">
                  <option>康定市</option>
                  <option>色达县</option>
                  <option>石渠县</option>
                  <option>稻城县</option>
                </optgroup>
                <optgroup label="阿坝州">
                  <option>红原县</option>
                  <option>金川县</option>
                  <option>马尔康市</option>
                </optgroup>
              </select></div>

              <div class="col-fm-r"><div class="form-child-title">所属服务器：</div>
              <select>
                <option>122.32.17.25</option>
                <option>122.32.27.55</option>
                <option>122.32.37.65</option>
                <option>122.32.47.75</option>
              </select>
            </div>
          </div>
        </div>

        <div class="form-item">
          <div class="form-title">摄像头名称：</div>
          <div class="form-content"><input id="e2" class="input" value="" type="text"></div>
        </div>
        <div class="form-item">
          <div class="form-title">摄像头RTSP：</div>
          <div class="form-content"><input class="input" value="" type="text"></div>
        </div>

        <div class="form-item">
          <div class="form-title">摄像头地址：</div>
          <div class="form-content"><input class="input" value="" type="text"></div>
        </div>
        <div class="form-item">
          <div class="form-title">经度：</div>
          <div class="form-content">
            <div class="col-fm-l"><input class="input" id="lng" type="text"></div>
            <div class="col-fm-r"><div class="form-child-title">纬度：</div><input class="input" id="lat" type="text"></div>
          </div>
        </div>
        <div class="form-item">
          <div class="form-title">联系人：</div>
          <div class="form-content">
            <div class="col-fm-l"><input class="input" id="pointInput" type="text"></div>
            <div class="col-fm-r"><div class="form-child-title">联系电话：</div><input class="input" type="text"></div>
          </div>
        </div>

        <div class="form-item">
          <div class="form-title">备注：</div>
          <div class="form-content"><textarea class="input" id="address1"></textarea></div>
        </div>

        <div class="form-item form-btn">
          <button class="btn" id="save">保存</button><!-- <button class="btn btn-minor">测试连接</button> -->
        </div>
      </div>

    </div>
  </div>
</div>
<!--dialog end-->

</body>
</html>


<script>
  $(document).ready(function() {
   $(".more").on("click",function(){
    $(this).parent().height()<51 ? $(this).parent().css({"height": "auto"}) : $(this).parent().css({"height": "50"});
  })

  //  $(".as-item-con").on('click', function(event) {
  //   alert($(this).find("ul").height())
  // });



   $("#add").on("click",function(){
    $(".dialog").show();
  })


   $(".dialog .close,#cancel").on("click",function(){
    $(".dialog").hide();
  })

   /*选项卡*/
   $(".nav-tabs").on("click", "a", function() {
     $(this).parents().siblings().removeClass('active').end().addClass('active');
     $(".sys-content").hide().eq($(this).parents().index()).show();
   })

   /*地图边栏折叠*/
   $(".map-left-toggle").on("click",function(){
     var w=$(".map-left").width();
     if($(this).hasClass('open')){
      $(this).removeClass('open');
      $(".map-left").animate({"left":1},400);
    }
    else{
      $(this).addClass('open');
      $(".map-left").animate({"left":-w},400);
    }
  })
   $(".map-right-toggle").on("click",function(){
     var w=$(".map-right").width();
     if($(this).hasClass('open')){
      $(this).removeClass('open');
      $(".map-right").animate({"right":1},400);
    }
    else{
      $(this).addClass('open');
      $(".map-right").animate({"right":-w},400);
    }
  })

   /*顶栏菜单动画*/
   // $(".curLine").css({
   //   "width": $("#sys-menu ul li.active").width(),
   //   "left": $("#sys-menu ul li.active").position().left
   // });

   // $("#sys-menu").on("mouseover", "li", function() {
   //   $(".curLine").stop(true).animate({
   //    left: $(this).position().left,
   //    width: $(this).width()
   //  }, 200);
   // })

   // $("#sys-menu").on("mouseout", "li", function() {
   //   $(".curLine").animate({
   //    left: $(".active").position().left,
   //    width: $(".active").width()
   //  }, 200)
   // })

/*边栏菜单折叠*/
/*   $(".sys-sidebar").on("click", "em",function() {
     if($(this).hasClass('open')){
      $(this).attr("class",'hide');
      $(this).next("ul").slideUp();
    }
    else{
      $(this).attr("class",'open');
      $(this).next("ul").slideDown();
    }
  })*/





})

// window.onresize = function(){
// 	console.log($(window).height());
// 	console.log($(".col-right").offset().top);
// 	$(".sys-content").height($(window).height()-$(".sys-content").offset().top-20);
// 	if($('.col-right').length>0){$('.col-right').height($(window).height()-$(".col-right").offset().top-32);}
// }
// $(window).resize();

var map = new BMap.Map("map");
var point = new BMap.Point(104.072178,30.663473);
map.centerAndZoom(point, 14);
</script>
